<template>
  <div class="head">
    <div class="head-left">
      <img
        src="https://pic.cdfgsanya.com/assets/upload/visual/d1b3c445d70b64e1f7b90afaf02b4fb9.png"
        alt=""
      />
    </div>
    <div class="head-middle">
      <div class="zuo">
        <img
          src="https://m.cdfgsanya.com/wap/resources/images/icons/icon-search@2x.444b6495.png"
          alt=""
        />
      </div>
      <div class="you">
        <input type="text" placeholder="兰蔻" @click="fun()"/>
      </div>
    </div>
    <div class="right">
      <img
        src="https://m.cdfgsanya.com/wap/resources/images/icons/icon-customer-service@2x.dfee9fd8.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    fun(){
       this.$router.push("/search");
    }
  }
};
</script>

<style scoped>
.head{
  width: 100%;
  display: flex;
  background: #e6e4ee;
  height: 48px;
  position: sticky;
  top:0;
  z-index: 3;
}
.head .head-left img{
  width:50px;
  height: 35px;
  margin-left: 5px;
  margin-top: 6px;
}
.head .head-middle{
  display: flex;
  background: white;
  border-radius: 13px;
  height: 35px;
  margin-top: 8px;
  margin-left: 14px;
  width: 250px;
}
.head .head-middle img{
  width: 20px;
  margin-left: 13px;
  margin-top: 8px;
}
.head .right img{
  width: 22px;
  margin-top: 16px;
  margin-left: 16px;
}
input{
  margin-top: 10px;
  border:white;
  margin-left: 8px;
}
</style>